<template>
	<view class="header"></view>
	<view class="container">
		<view class="siderBar">
			<view class="siderBarTitle">
				等级特权
			</view>
			<view class="cateItem" v-for="(item,index) in cateList" :class="{'active':isChecked == item.levelEquityId}" :key="item.levelEquityId" @click="checkItem(item)">
				{{item.content}}
				<view class="img" v-if="isChecked == item.levelEquityId">
					<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/82ecc6d4-bac7-41a5-a8c7-503e1c1aa24f.png" mode="aspectFill"></image>
				</view>
			</view>

		</view>
		<view class="rightContent">
			<view class="topContent">
				<view class="topImg" v-for="(item,index) in imgList" :key="item.id" @click="getAssetLevelEquity(item.level)">
					<image :src="item.imgUrl" mode="aspectFill" v-if="storageManage.userInfo().assetLevel ==item.isMerber"></image>
					<image :src="item.imgUrlLock" mode="aspectFill" v-else></image>
				</view>
			</view>
			<view class="bottomContent">
				<view class="title">
					<view class="left">
						邮享活动权益
					</view>
					<view class="right">
						次数
					</view>
				</view>
				<view class="content">
					<view class="item" v-for="(item,index) in contentList" :key="item.levelEquityId" @click="openDialog(item)">
						<view class="left">
							{{item.content}}
						</view>
						<view class="right">
							{{item.times}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="dialogRef" type="center" :mask-click="true" @change="onPopupChange">
			<view class="contentPop">
				<view class="title">温馨提示</view>
				<view class="text">线下活动已开展，具体请联系最近网点。</view>
				<view class="bottom">
					<view class="cancel" @click="cancel">取消</view>
					<view class="submit" @click="navToSite">导航去网点</view>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script setup>
	import { ref, reactive } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { $equitySelectAssetLevelEquity, $equitySelectLevelEquity } from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js'
	const isChecked = ref('')
	const cateList = ref([])

	const dialogRef = ref()

	const imgList = ref([
		{level:2,imgUrl:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/c457dcb6-38e2-4901-a832-5c8bdf2c9e2b.png',imgUrlLock:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/2b5dca74-c5fa-4ddb-a797-0b6df40cb6a9.png',isMerber:'2'},//金桂
		{level:3,imgUrlLock:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e665d325-e83a-4b6e-8baf-e4354d08b512.png',imgUrl:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/0db4d8dd-bc2e-42d7-b8ce-cdc32479472f.png',isMerber:'3'},//福佳
		{level:4,imgUrlLock:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e5f81c7d-d08d-4ef7-a330-f60398dff617.png',imgUrl:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/32bc05fe-6d31-4cd1-b0ab-40cabd2b3e8e.png',isMerber:'4'},//钻石
		{level:5,imgUrlLock:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/02d0a781-232e-4b24-818b-9da9e8a85f98.png',imgUrl:'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/83ce8cc4-c6d4-4573-90f8-598adb59fa53.png',isMerber:'5'},//鼎福
	])

	const contentList = ref([])

	onShow(() => {
		if(storageManage.userInfo().assetLevel === void 0 || storageManage.userInfo().assetLevel < 2){
			getAssetLevelEquity(2)
		}else{
			getAssetLevelEquity(storageManage.userInfo().assetLevel)
		}
	})
	// 请求权益奖励
	function getAssetLevelEquity(level){
		uni.showLoading({ title: '权益加载中...' })
		$equitySelectAssetLevelEquity({level}).then(res=>{
			isChecked.value = res.bizData[0].levelEquityId
			cateList.value = res.bizData
			// 根据第一项 请求 具体的权益奖励
			$equitySelectLevelEquity({levelEquityId:res.bizData[0].levelEquityId}).then(res=>{
				contentList.value = res.bizData
				uni.hideLoading()
			})
		})
	}

	// 选中的item
	const checkItem = (item) => {
		isChecked.value = item.levelEquityId
		$equitySelectLevelEquity({ levelEquityId: item.levelEquityId }).then(res => {
			contentList.value = res.bizData
		})
	}
	// 打开弹窗
	const openDialog = (item) => {
		dialogRef.value.open()
	}
	// 关闭弹窗
	const cancel = () => {
		dialogRef.value.close()
	}
	// 导航到网点
	const navToSite = () => {

		uni.showToast({
			title: '暂未开放',
			icon: 'none',
			duration: 2000
		})
		dialogRef.value.close()
	}
</script>

<style lang="scss" scoped>
	.contentPop {
		width: 620rpx;
		height: 410rpx;
		background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/dc76a66d-11f6-49a8-ae67-c9d23909997e.png');
		background-size: cover;
		border-radius: 30rpx;

		.title {
			width: 100%;
			height: 152rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 36rpx;
			color: #000000;
			line-height: 152rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.text {
			margin-top: 18rpx;
			width: 100%;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.bottom {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 60rpx;
			padding: 0 40rpx;
			box-sizing: border-box;

			.cancel {
				width: 240rpx;
				height: 80rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #999999;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #DDDDDD;
			}

			.submit {
				width: 240rpx;
				height: 80rpx;
				background-color: rgba(36, 199, 137);
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				border-radius: 12rpx 12rpx 12rpx 12rpx;

			}
		}

	}

	.header {
		width: 100%;
		height: 24rpx;
		background-color: #F2F5F9;
	}

	image {
		overflow: auto;
	}

	.active {
		background: #EAFAF4;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #24C789 !important;
		line-height: 80rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.container {
		// margin-top: 24rpx;
		width: 100%;
		height: calc(100vh - 24rpx);
		background-color: #F2F5F9;
		display: flex;

		.siderBar {
			width: 184rpx;
			height: calc(100vh - 24rpx);
			overflow-y: scroll;
			background-color: #fff;

			.siderBarTitle {
				width: 184rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.cateItem {
				width: 184rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 80rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				position: relative;

				.img {
					width: 20rpx;
					height: 8rpx;
					position: absolute;
					right: 20rpx;
					bottom: 60rpx;

					image {
						width: 20rpx;
						height: 10rpx;
					}
				}
			}
		}

		.rightContent {
			margin-left: 24rpx;
			width: 542rpx;
			height: calc(100vh - 24rpx);
			background-color: #fff;
			overflow-y: scroll;

			.topContent {
				max-width: 542rpx;
				height: 80rpx;
				overflow-x: scroll;
				display: flex;
				background-color: transparent;
				position: relative;

				&>.topImg:nth-child(2) {
					// 选择父元素的第二个子元素
					border-radius: 24rpx 0 0 0;
					position: absolute;
					left: 236rpx;
				}

				&>.topImg:nth-child(3) {
					// 选择父元素的第二个子元素
					border-radius: 24rpx 0 0 0;
					position: absolute;
					left: 472rpx;
				}

				&>.topImg:nth-child(4) {
					// 选择父元素的第二个子元素
					border-radius: 24rpx 0 0 0;
					position: absolute;
					left: 708rpx;
				}

				&>.topImg:nth-child(5) {
					// 选择父元素的第二个子元素
					border-radius: 24rpx 0 0 0;
					position: absolute;
					left: 944rpx;
				}

				.topImg {
					width: 270rpx;
					height: 80rpx;

					// overflow-x: scroll;
					image {
						width: 270rpx;
						height: 80rpx;
						border-radius: 24rpx 0 0 0;
					}
				}

				// &>:nth-child(2) {  // 假设要设置父元素的第二个子元素的样式
				//    border-radius: 24rpx 0 0 0;
				// position: absolute;
				// left: 34rpx;

				//  }

			}

			.bottomContent {
				width: 542rpx;
				height: calc(100vh - 120rpx);

				.title {
					width: 542rpx;
					height: 108rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 40rpx 20rpx;
					box-sizing: border-box;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #24C789;
					line-height: 108rpx;
					font-style: normal;
					text-transform: none;
					background: rgba(36, 199, 137, 0.1);
				}

				.content {
					width: 542rpx;
					height: calc(100vh - 228rpx);
					overflow-y: scroll;

					.item {
						width: 542rpx;
						height: 108rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 40rpx 20rpx;
						box-sizing: border-box;
						border-bottom: 2rpx solid #DDDDDD;

						.left {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							// line-height: 108rpx;
							overflow: hidden;

							text-overflow: ellipsis;

							display: -webkit-box;

							-webkit-box-orient: vertical;

							-webkit-line-clamp: 2;
							font-style: normal;
							text-transform: none;
						}
					}

				}

			}
		}
	}
</style>